<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $btn = $('#btn');
            var $box = $('.box');

            $btn.click(function fnMove() {
                // $box.css({'width': 1000});
                /*
                    animate参数
                    参数一  要做动画的样式属性 写出字典样式
                    参数二  动画持续的时间 默认是400ms 设置时不写单位
                    参数三  动画曲线默认是'swing'缓冲运动 还有'linear'匀速运动
                    参数四  动画的回调函数，它是一个匿名函数再动画结束时会自动调用
                */
                $box.animate({'width': 1000}, 100, 'swing', function () {
                    $box.animate({'margin-top': 400}, 100, 'swing', function () {
                        $box.animate({'width': 200, 'margin-top': 0}, 100, 'swing', function () {
                            fnMove();
                        });
                    });
                });
            })
        })
    </script>
</head>
<body>
    <input type="button" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>